<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/style/zc.css"/>
		<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/swiper.min.css"/>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/iscroll.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/iscroll-probe.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">提示</h4>
		      </div>
		      <div class="modal-body" id="modal-body">
					请正确填写用户名和密码
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		        
		      </div>
		    </div>
		  </div>
		</div>
		<div id="big">
			<header>
				<div>
					<a href="登录.html" class="glyphicon glyphicon-menu-left"></a>
				</div>
				<div>
					<span>淘宝注册</span>
				</div>
			</header>
			
			<main>
				<div>
					<p class="tishi">为了您的账号安全请填写一个手机号完成验证</p>
					
					<div id="inputGroup">
						
						<div id="userName">
							<label for="userName">手机号</label>
							<input type="text" id="user_name"/>
							<span id="shouji">请输入手机号码</span>
						</div>
						
						<div id="userPassword">
							<label for="userPassword">密&ensp;码</label>
							<input type="password" id="user_password"/>
							<span id="mima">请输入密码</span>
						</div>
						
					</div>
					<button id="sign">确定</button>
				</div>
			</main>
			
			
			
			
		</div>
	
	
	
	
	
	<script>
		(function(doc, win){
	        var docEl = doc.documentElement,
	            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	            recalc = function(){
	                var clientWidth = docEl.clientWidth;
	                if(!clientWidth) return;
	                docEl.style.fontSize = 100 * (clientWidth / 330) + 'px';
	            };
	        if(!doc.addEventListener) return;
	        win.addEventListener(resizeEvt, recalc, false);
	        doc.addEventListener('DOMContentLoaded', recalc, false);
	    })(document, window);
		var aaa = /^1[34578]{1}[0-9]{9}$/
		var bbb = /^([a-zA-Z0-9]){1}(\w){6,20}$/
		$("#user_name").blur(function(){
			if(aaa.test($(this).val())){
				$("#shouji").css({"color" : "green"})
				$("#shouji").text("手机号码格式正确")
			}else if($(this).val() == ""){
				$("#shouji").css({"color" : "red"})
				$("#shouji").text("请输入手机号码")
			}else{
				$("#shouji").css({"color" : "red"})
				$("#shouji").text("手机号码格式有误")
			}
		})
		$("#user_password").blur(function(){
			console.log(bbb.test($(this).val()))
			if($(this).val() == $("#user_name").val()){
				$("#mima").css({"color" : "red"})
				$("#mima").text("密码不能与用户名一致")
			}else if(bbb.test($(this).val())){
				$("#mima").css({"color" : "green"})
				$("#mima").text("密码正确")
			}else if($(this).val() == ""){
				$("#mima").css({"color" : "red"})
				$("#mima").text("请输入密码")
			}else{
				$("#mima").css({"color" : "red"})
				$("#mima").text("密码格式有误")
			}
		})
		$("#sign").click(function(){
			var phone = $("#user_name").val();
			var pass = $("#user_password").val();
			var msg = false;
			if(bbb.test($("#user_password").val()) && aaa.test($("#user_name").val())){
				$.ajax({
					type:"post",
					url:"http://47.92.37.168/supermarket/data/register.php",
					async:false,
					data:{
						'user_phone':phone,
						'user_pass_word':pass
					},
					dataType:"jsonp",
					jsonp:"callback",
					jsonpCallback:"success_JsonpCallback",
					success : function(data){
						console.log(data.msg)
						if(data.msg == "success"){
							alert(1)
							msg = true
							location.href = "登录.html"
						}else{
							alert(2)
							msg = false
							$('#modal-body').text("用户名已被注册!")
							$('#myModal').modal()
						}
					}
				});
			}else{
				$('#modal-body').text("请正确填写用户名和密码!")
				$('#myModal').modal()
			}
			
			
		})
	</script>
	</body>
</html>
